<template>
  <div class="app-container">
     <el-row>
        <el-col
         style="width: 800px;  margin-left: 200px;"
          :span="8"
            v-for="(value, key, index) in bookList"
            
            :key="key"
            :offset="index > 0 ? 4 : 0">
        <el-card :body-style="{ padding: '0px' }">
          <img  :src='value.image' class="image">
          <div class="all">
            <h1 class="bookName">{{ value.bookName}}</h1>
            <span class="author">  {{value.author  }} 著</span>
            <div class="bottom clearfix">
             <el-tag  style="margin-left: 50px;" type="warning">{{value.bookType}}</el-tag>
             <el-tag type="warning">连载</el-tag>
             <el-tag type="warning">推荐</el-tag>
             <br>
             <span style="margin-left: 50px;">{{value.description}}</span>
             <br>
             <br>
              <span style="margin-left: 50px;">上架时间  :</span>
              <time class="time">{{ value.createTime }}</time>
              <br>
              <br>
              <span style="margin-left: 50px;">阅读量 :{{value.visits}}   |   点赞量 :100</span>
              <br>
              <br>
               <router-link :to="'/readBookInfo/'+value.id+'/'+1+'/'+value.id">
                     <el-button class="button" type="primary" round>继续阅读</el-button>
              </router-link>
   
               <el-button class="button" type="success" round>加入书架</el-button>
               <el-button class="button" type="info" round>点赞</el-button>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <br>
    <br>
    <br>
    <br>
    <el-tabs type="border-card">
      <el-tab-pane>
        <span slot="label"><i class="el-icon-date"></i> 作品信息</span>
         <div>
          <span
            :span="8"
            v-for="(value, key, index) in bookList"
            
            :key="key"
            :offset="index > 0 ? 4 : 0">作品描述：{{value.description}}
            <br>上架时间  :{{ value.createTime }} 
          </span>

          <br> <span class="newchapter">最新章节 第{{this.newChapter.chapterNum}}章  : {{ this.newChapter.title }}</span>
          <el-divider></el-divider>

            
        </div>
      </el-tab-pane>

      <el-tab-pane>
        <span slot="label"><i class="el-icon-date"></i> 目录</span>
         <div>
          <span
            class="showChapterList"
            :span="8"
            v-for="(value, key, index) in chapterInfo"
            :key="key"
            :offset="index > 0 ? 4 : 0">
            <router-link :to="'/readBookInfo/'+value.bookId+'/'+value.chapterNum+'/'+value.id">
             第{{value.chapterNum}}章  : {{ value.title }} <br>       
            </router-link>
            
          </span>
          <el-divider></el-divider>      
        </div>
        
      </el-tab-pane>

    </el-tabs>

 

  </div>
</template>
<script>
//引入调用slideShow.js文件
import booksShowApi from "@/api/booksShowApi";
export default {
  //写核心代码位置
  // data:{
  // },
  data() {
    //定义变量和初始值
    return {
      chapterInfo:{},
      newChapter:{},
      bookList:{},
      listLoading: true, // 是否显示loading信息
      list: null, //查询之后接口返回集合
      page: 1, //当前页
      limit: 5, //每页记录数
      total: 0, //总记录数
      bank: {
        // name: "",
        // startTime: "",
        // endTime: "",
      }, //条件封装对象
    };
  },
  created() {

  },
  mounted() {
    this.getbooksByid(this.$route.params.id);
    this.getnewChapter(this.$route.params.id);
    this.getChapterList(this.$route.params.id);
  },
  methods: {
      handleEdit(index, row) {
        console.log(index, row);
      },
      handleDelete(index, row) {
        console.log(index, row);
      },
   getbooksByid(id){
        booksShowApi.getbooksInfoByid(id).then((response) => {
        console.log(response);
        this.bookList = response.data.list;
        console.log(this.bookList);
      })
   },
   getChapterList(id){
        booksShowApi.getChapterList(id).then((response) => {
        console.log(response);
        this.chapterInfo = response.data.list;
        console.log(11111,this.chapterInfo);
      })
   },
     getnewChapter(id){
        booksShowApi.getnewChapter(id).then((response) => {
        console.log(response);
        this.newChapter = response.data;
        console.log(this.newChapter);
      })
   }

  },
};
</script>
<style>
	.DivClass{
		height:200px;
		width:200px;
	}
  .showChapterList{
    color:cadetblue;
  }
  .time {
    font-size: 13px;
    color: #999;
  }
  
  .bottomBan {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
  }

  .image {
    width: 30%;
    height: 240px;
    display: block;
    float: left;
  }
  .newchapter{
    color:aqua;
    
  }
  .bookName {
      margin-left: 50px;
  }
  .author {
    margin-top: 10px;
     margin-left: 50px;
  }
  .clearfix:before,
  .clearfix:after {
      display: table;
      content: "";
  }
  
  .clearfix:after {
      clear: both
  }
</style>